<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>



<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>青麦门店系统</title>
<meta
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
	name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />

<!-- ================== BEGIN BASE CSS STYLE ================== -->
<%@ include file="../include/inc_head.jsp"%>
<!-- ================== END BASE CSS STYLE ================== -->

<!-- ================== BEGIN BASE JS ================== -->
<script src="/assets/plugins/pace/pace.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/orderStatus.css"> 
<!-- ================== END BASE JS ================== -->
</head>
<style>
.form-horizontal.form-bordered .form-group>.control-label {
    padding: 20px 158px 15px;
    border-right: 1px solid #eee;
    margin-right: -1px;
}
.form-horizontal.form-bordered .form-group>div {
    padding: 20px;
    border-left: 1px solid #eee;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle; 
    border-top: 1px solid #ddd;
}
</style>
<body>
	<!-- begin #page-loader -->
	<div id="page-loader" class="fade in">
		<span class="spinner"></span>
	</div>
	<!-- end #page-loader -->

	<!-- begin #page-container -->
	<div id="page-container"
		class="fade page-sidebar-fixed page-header-fixed">
		<!-- begin #header -->
		<%@ include file="../include/inc_header.jsp"%>
		<!-- end #header -->

		<!-- begin #sidebar -->
		<%@ include file="../include/inc_left.jsp"%>
		<!-- end #sidebar -->

		<!-- begin #content -->
		<div id="content" class="content">
			<!-- begin breadcrumb -->
			<ol class="breadcrumb pull-right">
				<li><a href="javascript:;">首页</a></li>
				<li class="active">配送详情</li>
			</ol>
			<!-- end breadcrumb -->
			<!-- begin page-header -->
			<h1 class="page-header">配送详情</h1>
				<button type="button" class="btn btn-primary m-r-5 m-b-5" onclick="back();">返回</button>
			<!-- end page-header -->
			   <!--
			    <table class="table table-bordered table-striped">
                            <thead>
                             <tr>
                                    <td style="width:220px;font-weight:900;font-size: 16px;">配送状态</td>
                                </tr>
                            </thead>
                            <tbody>
                            <tr>
                            	<td></td>
                            </tr>
				                   <tr>
				                     <td>
				                           <div id="appStepbar" style="margin-left: 24px;">  
										 <div data-control="Stepbar" class="flowstep" >  
										 <ol class="detail-stepbar flowstep-5" >  
										
										 <li class="step-first" >  
											 <div class="step-done" id="status0">  
												 <div class="step-name" >未确认</div>  
												 <div class="step-no" >1</div>  
												 <div class="step-time" >  
											 	</div>  
										 	</div>  
										 </li>  
										
										  <li class="" >  
											 <div class="step-done" id="status1">  
												 <div class="step-name" >已发运</div>  
												 <div class="step-no" >2</div>  
												 <div class="step-time" >  
											 	</div>  
										 	</div>  
										 </li> 
										  <li class="" >  
											 <div class="step-done" id="status2">  
												 <div class="step-name" >配送中</div>  
												 <div class="step-no" >3</div>  
												 <div class="step-time" >  
												 </div>  
											 </div>  
										 </li> 
										 <li class="" >  
											 <div class="step-cur" id="status3">  
											 <div class="step-name" >已收货</div>  
											 <div class="step-no" >4</div>  
										 </div>  
										 </li>  
										 <li class="step-last" >  
											 <div class="" id="status4">  
											 <div class="step-name" >完成</div>  
											 <div class="step-no" >5</div>  
										 <span ></span>  
										 </div>  
										 </li>  
										 </ol>  
										 </div>  
										 </div>
				                     </td>
				                   </tr>
                             </tbody>
                			</table>
			 
 					 <div class="table-responsive">
                        <table id="user" class="table table-bordered table-striped">
                            <thead>
                             <tr>
                                    <td style="width:220px;font-weight:900;font-size: 16px;">配送信息</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="width:320px;">订单ID:<a href="${ctx}/order/detail?order_id=2312432435432"  style="margin-left: 30px;">2312432435432</a></td>
                                    <td >发运订单总金额(商品+包装物):<a href="javascript:void(0);" style="margin-left: 60px;">108.00</a></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td style="width:320px;">发运时间:<a href="javascript:void(0);" style="margin-left: 30px;">2018-5-2</a></td>
                                    <td>配送时间:<a href="javascript:void(0);" style="margin-left: 76px;">1.0</a></td>
                                    <td>收货时间:<a href="javascript:void(0);" style="margin-left: 76px;">1.0</a></td>
                                </tr>
                                <tr>
                                    <td style="width:320px;">配送员姓名:<a href="javascript:void(0);" style="margin-left: 30px;">张三</a></td>
                                    <td>配送员电话:<a href="javascript:void(0);" style="margin-left: 46px;">18888888888</a></td>
                                    <td></td>
                                </tr>
                                 <tr>
                                    <td style="width:320px;">订单应收金额:<a href="javascript:void(0);" style="margin-left: 30px;" >108.00</a></td>
                                    <td>财务订单实际收款金额:<a href="javascript:void(0);" style="margin-left: 20px;">108.00</a></td>
                                    <td>财务收款时间:<a href="javascript:void(0);" style="margin-left: 20px;">2018-5-2</a></td>
                                </tr>
                                 <tr>
                                    <td style="width:320px;">抹零金额:<a href="#" style="margin-left: 30px;">0.00</a></td>
                                    <td>直减金额:<a href="javascript:void(0);" style="margin-left: 86px;">0.00</a></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td style="width:320px;">欠款金额（下单时候产生的欠款金额）:<a href="#" style="margin-left: 30px;">0.00</a></td>
                                    <td>退款金额:<a href="javascript:void(0);" style="margin-left: 86px;">0.00</a></td>
                                    <td></td>
                                </tr>
                                 <tr>
                                    <td style="width:320px;">添加时间:<a href="javascript:void(0);" style="margin-left: 30px;">2018-5-2</a></td>
                                    <td>最后修改时间:<a href="javascript:void(0);" style="margin-left: 72px;">2018-5-2</a></td>
                                    <td></td>
                                </tr>
                                
                            </tbody>
                        </table>
                          <table class="table table-bordered table-striped">
                            <thead>
                             <tr>
                                    <td style="width:220px;font-weight:900;font-size: 16px;">收货人信息</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                         <tr>
                                    <td style="width:220px;">收货人</td>
                                    <td><a href="javascript:void(0);" id="firstname" data-type="text" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter your Firstname">胡三</a></td>
                                </tr>
                                <tr>
                                    <td style="width:220px;">收货人地址</td>
                                    <td><a href="javascript:void(0);" id="sex" data-type="select" data-pk="1" data-value="" data-title="Select sex">南国花园38号</a></td>
                                </tr>
                                <tr>
                                    <td style="width:220px;">收货人电话</td>
                                    <td><a href="javascript:void(0);" id="sex" data-type="select" data-pk="1" data-value="" data-title="Select sex">18896864534</a></td>
                                </tr>
                                <tr>
                                    <td style="width:220px;">备注</td>
                                    <td><a href="javascript:void(0);" id="sex" data-type="select" data-pk="1" data-value="" data-title="Select sex">18896864534</a></td>
                                </tr>
                                   </tbody>
                        </table>
                    </div>
                    -->
                            <div class="panel panel-inverse" data-sortable-id="table-basic-1">
                        <div class="panel-heading" style="background: #a5bcd2;">
                            <h4 class="panel-title">配送详情</h4>
                        </div>
                        <div class="panel-body">
                        	<div class="table-responsive">
								<table class="table">
									<thead>
										<tr>
											<th>序号</th>
											<th>商品名称</th>
											<th>发运物理数量</th>
											<th>发运计价单位数量</th>
											<th>发运总金额(元)</th>
											<th>分拣状态</th>
											<th>单价</th>
											<th>实际配送数量</th>
											<th>实际配送计价单位数</th>
											<th>实际配送总金额</th>
											<th>实收总金额</th>
										</tr>
									</thead>
									<tbody>
									<c:forEach items="${itemList}" var="item" varStatus="status">
										<tr>
											<td>${status.index+1}</td>
											<td>${item.skuName}</td>
											<td>${item.expectGoodsNum}</td>
											<td>${item.expectGoodsPriceNum}</td>
											<td>
												<span class="text-warning"> 
													<i class="fa fa-jpy"></i> ${item.expectShipGoodsAmount}
												</span>
											
											</td>
											<td>${item.status}</td>
											<td>
												<span class="text-warning"> <i class="fa fa-jpy"></i>${item.unitPrice}
												</span>
											</td>
											<td>${item.shipGoodsNum}</td>
											<td>${item.shipGoodsPriceNum}</td>
											<td>
											<span class="text-warning"> 
													<i class="fa fa-jpy"></i> ${item.shipGoodsAmount}
												</span>
											</td>
											
											<td>
												<span class="text-warning"> 
													<i class="fa fa-jpy"></i> ${item.receiveGoodsAmount}
												</span>
											</td>
										</tr>
									</c:forEach>
										
									</tbody>
									<tfoot>
									<tr>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td>预期总：<span class="text-warning"> 
													<i class="fa fa-jpy"></i> ${expectTotal}
												</span>
												</td>
										<td>
										实配总：<span class="text-warning"> 
													<i class="fa fa-jpy"></i> ${shipTotal}
												</span>
										</td>
										<td>实收总：<span class="text-warning"> 
													<i class="fa fa-jpy"></i> ${receiveTotal}
												</span></td>
									</tr>
									</tfoot>
								</table>
                            </div>
                        </div>
                    </div>

		</div>
		<!-- end #content -->

		<%@ include file="../include/inc_footer.jsp"%>
		<!-- begin scroll to top btn -->
		<a href="javascript:;"
			class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
			data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
		<!-- end scroll to top btn -->
	</div>
	<!-- end page container -->

	<!-- ================== BEGIN BASE JS ================== -->
	<%@ include file="../include/inc_foot.jsp"%>

	<!-- ================== END BASE JS ================== -->

	<!-- ================== BEGIN PAGE LEVEL JS ================== -->
	<script src="/assets/plugins/DataTables/media/js/jquery.dataTables.js"></script>
	<script src="/assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js"></script>
	<script src="/assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
	<script src="/assets/js/table-manage-default.demo.min.js"></script>
	<script src="/assets/js/apps.min.js"></script>
	<!-- ================== END PAGE LEVEL JS ================== -->

	<script>
		$(document).ready(function() {
			App.init();
			TableManageDefault.init();
			initStatus(2);
		});
		
		function back(){
			history.go(-1);
		}
		
		function initStatus(index){
		if(index==-1){
			$('#status-1').show();
		for(var j=0;j<7;j++){
			$('#status'+j).hide();
		}
		return;
		}
			$('#status-1').hide();
			$("#status"+index).attr("class","step-cur");
		if(index>0){
		for(var i=0;i<=index-1;i++){
			$("#status"+i).attr("class","step-done");
		}
		for(var a=index+1;a<=6;a++){
			$("#status"+a).attr("class","ss");
		}
		}else{
			$("#status0"+index).attr("class","step-cur");
		for(var s=1;s<7;s++){
			$("#status"+s).attr("class","ss");
		}
		}
		}
	</script>

</body>
</html>


